<template>
  <div class="quotation-line">
    <div class="total-balance">
      <div class="total-assets">
        <p v-if="!anTether.show">Total Balance</p>
        <h2 v-else>{{anTether.title}}</h2>
        <div class="view-assets">
          <span>{{anTether.usd}}</span>
          <i class="el-icon-view"></i>
        </div>
      </div>
      <ul class="chart-type">
        <li
          v-for="item in chartList"
          :key="item.name"
          @click="cycChartClick(item.name)"
          :class="{'cycleChart': isChart == item.name}"
        >{{item.name}}</li>
      </ul>
      <lineChart :linedata="anTether.linedata" :color="anTether.color"  :height="'430px'" :width="'100%'" :class="'walletLine'" />
    </div>
  </div>
</template>

<script>
import lineChart from "@/components/charts/lineChart";
export default {
  name: 'quotationLine',
  props: ["anTether"],
  data() {
    return {
      isChart: "Week",
      activeName: "balance",
      comName: "balance",
      chartList: [
        {
          name: "Week"
        },
        {
          name: "Month"
        },
        {
          name: "Year"
        }
      ],
      aqTether: null
    };
  },
  components: {
    lineChart
  },
  methods: {
    cycChartClick(name) {
      this.isChart = name;
      this.$emit('cycChartClick', name)
    }
  }
};
</script>

<style lang="less" scoped>
.quotation-line {
  .total-balance {
    background: #fff;
    .total-assets {
      padding: 15px 30px;
      color: aliceblue;
      display: inline-block;
      p {
        color: rgb(128, 123, 123);
        font-size: 20px;
      }
      h2 {
        font-size: 28px;
        font-weight: 600;
        color: #000;
      }
      .view-assets {
        color: #000;
        font-size: 24px;
        i {
          cursor: pointer;
          display: inline-block;
          margin-left: 20px;
        }
      }
    }
    .chart-type {
      font-size: 16px;
      float: right;
      margin-right: 30px;
      padding-top: 30px;
      color: rgb(196, 197, 197);
      li {
        cursor: pointer;
        padding: 3px 10px;
        margin-right: 30px;
        text-align: center;
        display: inline-block;
      }
      .cycleChart {
        color: rgb(164, 182, 233);
        background: rgb(234, 243, 243);
      }
    }
  }
}
</style>


